<template>
  <a-modal :title="isEdit ? '编辑' : '新增'" :width="600" :visible="visible" @ok="handleModalConfirm"
    @cancel="handleModalCancel" :confirm-loading="modalLoading">
    <a-form-model ref="form" :model="form" :rules="formRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="产品" prop="loanId">
        <a-select   :filter-option="filterOption" show-search v-model="form.loanId" :options="loadOpt" placeholder="请选择" allowClear></a-select>
      </a-form-model-item>
      <a-form-model-item label="渠道" prop="channelId">
        <a-select  :filter-option="filterOption2"  show-search  v-model="form.channelId" :options="channelOpt" placeholder="请选择" allowClear></a-select>
      </a-form-model-item>
      <!-- prop="areaList" -->
      <a-form-model-item label="屏蔽地区">
        <a-tree-select v-model="form.areaList" multiple style="width: 100%" :tree-data="treeData" tree-checkable
          show-checked-strategy="SHOW_CHILD" placeholder="请选择" :maxTagCount="1" :dropdownStyle="{ height: '360px' }" />
      </a-form-model-item>
      <a-form-model-item label="年龄">
        <a-input-number v-model="age1" :min="20" :max="60" placeholder="请输入" />
        <span style="margin: 0 12px;">-</span>
        <a-input-number v-model="age2" :min="20" :max="60" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="芝麻分">
        <a-checkbox-group name="radioGroup" v-model="sesameSeed">
        <a-checkbox :value="item" :key="item" v-for="(item) in radioList"  >{{ item }}</a-checkbox>
      </a-checkbox-group>
        <!-- <a-radio-group name="radioGroup" v-model="sesameSeed">
          <a-radio :value="item" :key="item" v-for="(item) in radioList">{{ item }}</a-radio>
        </a-radio-group> -->
      </a-form-model-item>
      <a-form-model-item label="逾期情况">
        <a-checkbox-group name="radioGroup1" v-model="overdueSituation">
        <a-checkbox  :value="item" :key="item" v-for="(item) in radioList1" >{{ item }}</a-checkbox>
      </a-checkbox-group>
        <!-- <a-radio-group name="radioGroup1" v-model="overdueSituation">
          <a-radio :value="item" :key="item" v-for="(item) in radioList1">{{ item }}</a-radio>
        </a-radio-group> -->
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/loan';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    default: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      modalLoading: false,
      form: {
        loanId: undefined,
        channelId: undefined,
        areaList: [],
      },
      formRules: {
        loanId: { required: true, message: '请选择产品', trigger: ['blur', 'change'] },
        channelId: { required: true, message: '请选择渠道', trigger: ['blur', 'change'] },
        // areaList: { required: true, message: '请选择屏蔽区域', trigger: ['blur', 'change'] },
      },
      age1: '',
      age2: '',
      sesameSeed: [],
      overdueSituation: [],
      treeData: [],
      loadOpt: [],
      channelOpt: [],
      radioList: ['700以上', '650-699以内', '600-649以内', '600以下'],
      radioList1: ['无逾期', '有逾期'],
    };
  },
  computed: {
    isEdit() {
      return Object.keys(this.default).length > 0;
    },
  },
  watch: {
    visible(val) {
      if (val) {
        if (this.isEdit) {
          const form = JSON.parse(JSON.stringify(this.default || '{}'));
          const { id, loanId, channelId, loanFilterLabelVOList } = form;
          this.form = { id, loanId, channelId, areaList: '' };
          if (loanFilterLabelVOList) {
            console.log(loanFilterLabelVOList)
            this.form.areaList = loanFilterLabelVOList.find((it) => it.labelName === '城市').content.split(',');
            const age = loanFilterLabelVOList.find((it) => it.labelName === '年龄').content.split('-');
            this.age1 = age[0];
            this.age2 = age[1];
            this.sesameSeed = loanFilterLabelVOList.find((it) => it.labelName === '芝麻分').content.split(',');
            this.overdueSituation = loanFilterLabelVOList.find((it) => it.labelName === '逾期情况').content.split(',');
          }
        }
      } else {
        // this.handleModalCancel();
      }
    },
  },
  mounted() {
    // this.getSelect();
  },
  methods: {
    filterOption(input, option) {
      return option.data.props.productNike.indexOf(input) >= 0;
    },
    filterOption2(input, option) {
      return option.data.props.channelName.indexOf(input) >= 0;
    },

    getSelect() {
      Ajax.getFilterSelect().then(({ success, data }) => {
        if (success) {
          this.loadOpt = Array.isArray(data) ? data.map((it) => ({
            ...it,
            label: it.productNike,
            value: it.id,
          })) : [];
        };
      });
      Ajax.getChannelSelect().then(({ success, data }) => {
        if (success) {
          this.channelOpt = Array.isArray(data) ? data.map((it) => ({
            ...it,
            label: it.channelName,
            value: it.id,
          })) : [];
        };
      });
      Ajax.getCityTree().then(({ success, data }) => {
        if (success) {
          this.treeData = Array.isArray(data) ? data.map((it) => ({
            ...it,
            value: it.title,
          })) : [];
          this.treeData.map((item) => {
            item.value = item.title;
            if (item.children && item.children.length) {
              item.children.map((it) => {
                it.value = it.title;
              });
            }
          });
        };
      });
    },
    handleModalConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.modalLoading = true;
          const params = { ...this.form };
          params.loanName = this.loadOpt.find((it) => it.value === params.loanId).label;
          params.channelName = this.channelOpt.find((it) => it.value === params.channelId).label;
          params.loanFilterConditionDTOList = [
            {
              labelName: '城市',
              label: 'cityName',
              content: this.form.areaList.join(','),
              showType: 5,
            },
            {
              labelName: '年龄',
              label: 'age',
              content: (this.age1 || '') + '-' + (this.age2 || ''),
              showType: 2,
            },
            {
              labelName: '芝麻分',
              label: 'sesameSeed',
              content: this.sesameSeed.join(',') || '',
              showType: 1,
            },
            {
              labelName: '逾期情况',
              label: 'overdueSituation',
              content: this.overdueSituation.join(',') || '',
              showType: 1,
            },
          ];
          delete params.areaList;
          const ajaxName = this.isEdit ? 'editFilterList' : 'addFilterList';
          const message = this.isEdit ? '编辑成功' : '新增成功';
          Ajax[ajaxName](params)
            .then(({ success }) => {
              if (success) {
                this.$message.success(message);
                this.$emit('success');
                this.handleModalCancel();
              }
            })
            .finally(() => {
              this.modalLoading = false;
            });
        }
      });
    },
    handleModalCancel() {
      this.form.areaList = undefined;
      this.age1 = '';
      this.age2 = '';
      this.sesameSeed = [];
      this.overdueSituation = [];
      this.$refs.form.resetFields();
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-form-item {
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
